<template>
  <div class="">
    <div
      class="big-main-box-item"
      :class="'big-main-box-item' + props._bg"
      :style="{ width: props._w + 'rem', height: props._h + 'rem' }"
    >
      <h3>{{ props.titleName }}</h3>
      <div class="big-main-box-item-main" v-if="props.defaultList.length">
        <div class="big-main-box-item-text"></div>
        <div class="swiper-container-main">
          <div
            class="swiper-container" :id="props.curClass"
            :style="{ height: props.child_h + 'rem' }"
          >
            <div class="swiper-wrapper">
              <div
                class="swiper-slide big-main-box-item-text"
                v-for="item in props.defaultList"
                :key="item.id"
              >
                <span
                  class="text-color"
                  :class="'text-color' + item.status"
                  v-if="item.status"
                ></span>
                <span class="text-title-color">{{ item.title }}</span>
                <span class="text-default-color">{{ item.value_1 }}</span>
                <span class="text-default-color">{{ item.value_2 }}</span>
                <span class="text-default-color">{{ item.value_3 }}</span>
              </div>
            </div>
          </div>
        </div>
        <slot name="Tcurve"></slot>
      </div>
    </div>
  </div>
</template>
<script setup>
import { onMounted } from "vue";
import "swiper/dist/css/swiper.min.css";
import Swiper from "swiper";
const props = defineProps({
  curClass:{
    type: String,
    default: "",
  },
  titleName: {
    type: String,
    default: "",
  },
  defaultList: {
    type: Array,
    default: () => [],
  },
  _w: {
    type: Number,
    default: 31.8,
  },
  _h: {
    type: Number,
    default: 16.8,
  },
  _bg: {
    type: String,
    default: "",
  },
  child_h: {
    type: Number,
    default: 11,
  },
  _autoplay:{
    type: Number,
    default: 1500,
  }
});
onMounted(() => {
  let swr = document.getElementById(props.curClass)
  new Swiper(swr, {
    autoplay: props._autoplay,
    direction: "vertical",
    slidesPerView: 4,
    paginationClickable: true,
    spaceBetween: 0,
    loop: true,
  });
});
</script>
<style lang="scss" scoped>
.big-main-box-item {
  // width: 31.8rem;
  // height: 16.8rem;
  background: url("@/assets/image/icon11.png") no-repeat;
  background-repeat: no-repeat;
  background-size: auto 100%;

  h3 {
    font-size: 2rem;
    color: #fff;
    padding: 1.2rem 0 0 4rem;
    font-weight: 400;
  }

  .big-main-box-item-main {
    font-size: 1rem;
    color: #fff;
    padding: 1rem 3rem;

    .big-main-box-item-text {
      display: flex;
      align-items: center;
      line-height: 1.5;
      .text-title-color {
        color: #00ffff;
      }

      .text-default-color {
        color: #ffffff;
        margin-left: 1rem;
        flex: none;
      }

      .text-color {
        width: 1rem;
        height: 1rem;
        border-radius: 1rem;
        margin-right: 1rem;
      }
      .text-color1{
        background: #EEE08D;
      }
      .text-color2{
        background: #FF1313;
      }
      .text-color3{
        background: #42FF00;
      }

      .text-grey-color {
        opacity: 0.8;
      }
      .text-red-color {
        color: #f00;
      }
    }
  }
}
.big-main-box-item12 {
  background: url("@/assets/image/icon12.png") no-repeat;
  background-repeat: no-repeat;
  background-size: auto 100%;
}
</style>
  